<template>
  <div id="main" :style="winStyle" v-if="isInit!==0">
    <!--<div class="el-header" ref="el-header">头部</div>-->
    <!--<div class="el-container" ref="el-container" :style="{height:containerHeight+'px'}">-->
    <!--<div class="el-aside" ref="el-aside">侧边栏</div>-->
    <!--<div class="el-main" ref="el-main">主体</div>-->
    <!--</div>-->
    <el-container v-if="isInit===1"
                  :class="{'el-container-printer':!isPrintPage()}"
                  v-show="CurrUser.IsLogin()"
                  ref="el-container"
                  :style="{height:containerHeight+'px'}">
      <el-aside ref="el-aside" width="200px" v-show="isPrintPage()">
        <Nav></Nav>
      </el-aside>
      <!--主窗体: 头部,中间部-->
      <el-container>
        <!--头部-->
        <el-header ref="el-header" style="height: 45px;" v-show="isPrintPage()">
          <TopBar class="bcr12 b-ra-4"></TopBar>
        </el-header>
        <!--中间部-->
        <el-main ref="el-main">
          <Main></Main>
        </el-main>
      </el-container>
    </el-container>

    <router-view
      v-if="isInit===1 && CurrUser.IsLogin()===false"
      style="width: 100%;"
      :style="{height:containerHeight+'px'}"></router-view>

    <div class="el-footer" ref="el-footer" v-show="isPrintPage()" v-if="isInit===1">
      <div class="copyright">
        {{ companyName }} 2010~2019 &nbsp;|&nbsp; 当前版本: <b class="red" v-text="AppVersion"></b>
      </div>
    </div>
    <my-socket v-if="isInit===1"/>
    <product-choose-model-dialog v-if="isInit===1"/>
    <choose-address-dialog v-if="isInit===1"/>
    <play-music v-if="isInit===1"/>
    <my-slider-captcha v-if="isInit===1"/>
  </div>
  <!--计算浏览器尺寸-->
</template>
<script>
import Nav from './components/Common/Nav'
import Main from './components/Common/Main'
import TopBar from './components/Common/TopBar'
import './assets/css/custom.css'
import './assets/css/special_effects.css'
import Vue from 'vue'
import MySocket from './components/Common/MySocket'
import ProductChooseModelDialog from './components/Dialog/ProductChooseModelDialog'
import ChooseAddressDialog from './components/Dialog/ChooseAddressDialog'
import PlayMusic from './components/Common/PlayMusic'
import MySliderCaptcha from './components/Common/MySliderCaptcha'
import SignUtil from './components/Tools/SignUtil'
// 窗体-最小尺寸限制
const minSize = {
  width: 1920,
  height: 768
}
let minContainerHeight = 700
export default {
  name: 'App',
  beforeMount: function () {
    if (!this.CurrUser.IsLogin() && this.$route.name !== 'Login') {
      this.CurrUser.setCache(null)
      this.$router.push('/Login')
    }
  },
  mounted: function () {
    this.preInit(() => {
      this.init()
    })

    this.winStyle.height=document.getElementById('fixed-box').offsetHeight+'px'
    this.winStyle.width=document.getElementById('fixed-box').offsetWidth+'px'
    this.containerHeight=document.getElementById('fixed-box').offsetHeight-40
    this.$forceUpdate()
  },
  components: {
    MySliderCaptcha,
    PlayMusic,
    ChooseAddressDialog,
    ProductChooseModelDialog,
    MySocket,
    Nav,
    TopBar,
    Main
  },
  data: function () {
    return {
      AppVersion:window.AppVersion,
      currNotityMap: {},
      isInit: 0,
      // 默认高度
      winStyle: {
        width: this.getWinSize().width + 'px',
        height: this.getWinSize().height + 'px',
      },
      // 内容区域最小高度
      containerHeight: minContainerHeight
    }
  },
  methods: {
    removeLoading: function () {
      this.winStyle.opacity = 1
      document.getElementById('main-page-loading').remove()
      this.$forceUpdate()
    },
    preInit: function (callback) {
      this.$http.post(this.ApiDoNameCommon + 'Public/wo1mzi2dc4i9mnfbx5po', {}, {}).then((response) => {
        if (response.ok) {
          this.isInit = 1
          SignUtil.setConfig(response.body)
          typeof callback === 'function' ? callback() : ''
        } else {
          this.removeLoading()
          this.isInit = -1
        }
        this.$forceUpdate()
      }, () => {
        this.removeLoading()
        this.isInit = -1
        this.$forceUpdate()
      })
    },
    init: function () {
      var $this = this
      window.onresize = function () {
        $this.calcSize()
        $this.bus.$emit('ReCalcWinSizeBusCall')
      }

      setTimeout(() => {
        this.calcSize()
      }, 500)

      this.bus.$on('UserStatusUpdate', function () {
        $this.$forceUpdate()
      })
      document.title = '『' + Vue.prototype.companyName + '』后台管理系统'

      $this.bus.$on('ShowMessageProductCallBus', function (type, id) {
        if (type === 'ShopProduct') {
          $this.$router.push('/ProductStockPage?id=' + id)
        }
        if (type === 'SupplierProduct') {
          $this.$router.push('/SupplierProductSearchPage?id=' + id)
        }
      })
      $this.setNotify()
    },
    setNotify: function () {
      let $this = this
      // setTimeout(function () {
      //   $this.bus.$emit('NewOrderMessage', {
      //     message: '{"id":146,"content":"北欧貂绒绒感窗帘布×1支付金额: 40.00元"}',
      //     eventType: 'NewOrder'
      //   })
      // }, 1000)

      this.bus.$on('OpenOrderMessageCallBus', function (params) {
        if ($this.currNotityMap[params] && typeof ($this.currNotityMap[params].close) === 'function') {
          $this.currNotityMap[params].close()
        }
      })

      // 新订单消息
      this.bus.$on('NewOrderMessage', function (data) {
        console.log('data', data)
        var eventTypeMap = {
          NewOrder: '【新订单】消息',
          NewOrderApply: '【新退货单】消息',
        }

        // var currUrl=$this.$route.fullPath

        // console.log('$this.$route',$this.$route)

        data.message = JSON.parse(data.message)
        var currUrl = ''
        if ($this.$route.path.indexOf('?') === -1) {
          currUrl = '/#' + data.eventType.replace('New', '') + 'Page?time=' + Math.random() + '&eventType=' + data.eventType + '_EVENT&EVENT_PARAMS=' + data.message.id
        } else {
          var _queryParams = {
            time: Math.random(),
            eventType: data.eventType + '_EVENT',
            EVENT_PARAMS: data.message.id
          }
          // $this.$router.push({
          //   path:$this.$route.path,
          //   query:Object.assign($this.$route.query,_queryParams)
          // })
          // console.log('_queryParams',_queryParams)
          currUrl = '/#' + $this.$route.path + '?' + $this.mapToHttpQuery(_queryParams)
        }
        var tmpType = data.eventType.replace('New', '')
        currUrl = '/#/' + tmpType + 'Page?status=0&time=' + Math.random() + '&EVENT_PARAMS=' + data.message.id
        $this.currNotityMap[tmpType + '_' + data.message.id] = $this.$notify({
          title: eventTypeMap[data.eventType],
          message: data.message.content + '<a href="' + currUrl + '">点击查看</a>',
          position: 'bottom-right',
          dangerouslyUseHTMLString: true,
          type: 'success',
          duration: 0
        })
      })
    },
    closeNotify: function () {
      let $this = this
      var currKeys = Object.keys($this.currNotityMap)
      currKeys.forEach(function (value, index) {
        var currNotity = $this.currNotityMap[value]
        if (currNotity && typeof (currNotity.close) === 'function') {
          value.close()
        }
      })
    },
    isPrintPage: function () {
      return this.$route.query.isPrintPage != 1
    },
    // 主窗体-计算尺寸
    calcSize: function () {
      var winWidth = document.getElementById('fixed-box').offsetWidth
      var winHeight = document.getElementById('fixed-box').offsetHeight
      this.winStyle.width = (winWidth < minSize.width ? minSize.width : winWidth) + 'px'
      this.winStyle.height = (winHeight < minSize.height ? minSize.height : winHeight) + 'px'
      // this.containerHeight = winHeight - this.$refs['el-header'].offsetHeight - this.$refs['el-footer'].offsetHeight
      this.containerHeight = winHeight - this.$refs['el-footer'].offsetHeight
      // 内容区域最小高度
      if (this.containerHeight < minContainerHeight) {
        this.containerHeight = minContainerHeight
      }
      this.$forceUpdate()
    }
  }
}
</script>
<style>
@import "https://at.alicdn.com/t/c/font_3589419_pij0cm0iag.css?spm=a313x.7781069.1998910419.53&file=font_3589419_pij0cm0iag.css";

.el-container-printer div.el-breadcrumb {
  display: none
}

.el-container-printer div.router-path-box {
  display: none
}

</style>
